<!-- 备注弹窗 -->
<template>
    <Modal :value="value" @input="handleInput" width="746" :closable="false">
        <div slot="header">
            备注
            <Icon class="f-fr" type="ios-close" @click="closeModel"/>
        </div>
        <Form class="clearfix">
            <Input :disabled="editORshow" v-model="notes" type="textarea" :rows="4" :maxlength="255" @on-blur="fmtNotes"/>
        </Form>
        <!-- eslint-disable-next-line vue/no-parsing-error -->
        <div>（{{remarkLen < 255 ? remarkLen : 255}}字节）</div>
        <div slot="footer">
            <Button style="display: none" type="default"></Button>
            <Button type="primary" @click="saveRemark">保存</Button>
        </div>
    </Modal>
</template>

<script>
import { getStrBytesLen, getStrByBytesLen } from '@/libs/tools'
export default {
    name: 'RemarkModal',
    props: {
        value: {
            default: false,
            type: Boolean
        },
        remarkObj: {
            default: function () {
                return {
                    notes: '',
                    editORshow: false
                }
            },
            type: Object
        }
    },

    data () {
        return {
            remarkModal: false,
            notes: '',
            editORshow: true
        }
    },

    computed: {
        remarkLen () {
            return getStrBytesLen(this.notes || '')
        }
    },

    created () {
        this.notes = this.remarkObj.notes
        this.editORshow = this.remarkObj.editORshow
    },

    methods: {
        fmtNotes () {
            if (this.remarkLen > 255) {
                this.notes = getStrByBytesLen(this.notes, 255)
            }
        },
        closeModel () {
            this.handleInput(false)
        },
        handleInput (v) {
            this.$emit('input', v)
        },

        saveRemark () {
            this.$emit('saveRemark', this.notes)
            this.closeModel()
        }
    }
}
</script>
